<template>
    <div class="goods-auditing">
        <div class="goods-auditing-card">
            <Row :gutter="10">
                <Col span="5">
                <DatePicker  clearable v-model="searchData.timeStartEnd" style="width: 100%" type="daterange" placeholder="时间筛选"></DatePicker>
                </Col>
                <Col span="5">
                <Select clearable v-model="searchData.brandType" placeholder="按品牌分类">
                    <Option v-for="(key,value) in brandType" :value="key.brandid">{{key.brandname}}</Option>
                </Select>
                </Col>
                <Col span="5">
                <Input clearable v-model="searchData.goodsName" placeholder="商品名称" type="text"></Input>
                </Col>
                <Col span="5">
                <Input clearable v-model="searchData.goodsSn" placeholder="商品编号" type="text"></Input>
                </Col>
                <Col span="4">
                <Input clearable v-model="searchData.shopName" placeholder="店铺名称" type="text"></Input>
                </Col>
            </Row>
            <Row :gutter="10" style="padding: 10px 0;">
                <Col span="5">
                <Select clearable v-model="searchData.isTimeUp" placeholder="创建时间排序">
                    <Option :value="1">升序</Option>
                    <Option :value="2">降序</Option>
                </Select>
                </Col>
                <Col span="5">
                <Select @on-change="getTypeTwoList" clearable v-model="searchData.goodsTypeIdOne" placeholder="商品一级分类">
                    <Option v-for="(key,value) in goodsTypeOne" :value="key.catid">{{key.catname}}</Option>
                </Select>
                </Col>
                <Col span="5">
                <Select @on-change="getTypeThreeList" clearable v-model="searchData.goodsTypeIdTwo" placeholder="商品二级分类">
                    <Option v-for="(key,value) in goodsTypeTwo" :value="key.catid">{{key.catname}}</Option>
                </Select>
                </Col>
                <Col span="5">
                <Select clearable v-model="searchData.goodsTypeIdThree" placeholder="商品三级分类">
                    <Option v-for="(key,value) in goodsTypeThree" :value="key.catid">{{key.catname}}</Option>
                </Select>
                </Col>
                <Col span="4">
                <Button style="float: right" :loading="search_loading" @click="searchGetList" type="primary">
                    <Icon type="ios-pulse-strong"></Icon> 筛 选
                </Button>
                </Col>
            </Row>
            <div style="padding: 0px 0px 10px 0">
                <ButtonGroup>
                    <Button @click="allShenHe" type="primary">批量设置审核</Button>
                </ButtonGroup>
            </div>
            <i-table height="600" ref="selection" @on-selection-change="selectChange" stripe :columns="columns" :data="data"></i-table>
            <div style="padding: 15px;">
                <Page :transfer="false" @on-page-size-change="changeTiao" @on-change="changePage" :current="index" :total="total" show-elevator show-sizer :placement="'top'" :page-size="page_con" :page-size-opts="[10, 15, 20, 30, 40, 50]"></Page>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name:"goods-auditing",
        data(){
            return{
                columns:[
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '商品名称',
                        key: 'goodsname',
                        align:"center",
                        width:300,
                        render:(h,params)=>{
                            return h("Tooltip",{
                                props:{
                                    placement:"top-start",
                                }
                            },[
                                h("span",{
                                    attrs:{
                                        "class":"notwrap"
                                    },
                                    style:{
                                        cursor:"pointer",
                                        width:"100%",
                                    }
                                },params.row.goodsname),
                                h("div",{
                                    slot:"content",
                                    style:{
                                        "white-space":"normal"
                                    }
                                },params.row.goodsname+"")
                            ])
                        }
                    },
                    {
                        title: '图标',
                        key: 'goodsimg',
                        align:"center",
                        width:100,
                        render:(h,params)=>{
                            if(params.row.goodsimg==""){
                                return "暂无"
                            }else{
                                return h("div",{
                                    style:{
                                        cursor: "pointer",
                                    },
                                    on:{
                                        mouseover:(e)=>{
                                            this.$store.commit("setImgData",{
                                                src:e.target.src||e.target.getElementsByTagName("img")[0].src||"",
                                                x:e.x+50+"px",
                                                y:e.y-60+"px",
                                            })
                                        },
                                        mousemove:(e)=>{
                                            this.$store.commit("setImgData",{
                                                src:e.target.src||e.target.getElementsByTagName("img")[0].src||"",
                                                x:e.x+50+"px",
                                                y:e.y-60+"px",
                                            })
                                        },
                                        mouseout:(e)=>{
                                            this.$store.commit("setImgData",{
                                                src:"",
                                                x:"0px",
                                                y:"0px",
                                            })
                                        }
                                    }
                                },[
                                    h("img",
                                        {
                                            attrs:{
                                                src:params.row.goodsimg
                                            },
                                            style:{
                                                width:"42px",
                                                height:"42px",
                                                borderRadius:"4px",
                                                margin:"0px auto",
                                                display:"block",
                                            },
                                        })
                                ])
                            }
                        }
                    },
                    {
                        title: '商品编号',
                        key: 'goodssn',
                        align:"center",
                        width:100,
                    },
                    {
                        title: '会员价格',
                        key: 'shopprice',
                        align:"center",
                        width:100,
                        render:(h,params)=>{
                            return '¥ '+params.row.shopprice
                        }
                    },
                    {
                        title: '普通价格',
                        key: 'marketprice',
                        align:"center",
                        width:100,
                        render:(h,params)=>{
                            return '¥ '+params.row.marketprice
                        }
                    },
                    {
                        title: '代金券',
                        key: 'coupon_num_max',
                        align:"center",
                        width:100,
                    },
                    {
                        title: '店铺',
                        key: 'shopname',
                        align:"center",
                        render:(h,params)=>{
                            return h("Tooltip",{
                                props:{
                                    placement:"top-start",
                                    style:{
                                        width:"100%",
                                        overflow:"hidden"
                                    }
                                }
                            },[
                                h("span",{
                                    attrs:{
                                        "class":"notwrap",
                                    },
                                    style:{
                                        cursor:"pointer",
                                        width:"100%",
                                    }
                                },params.row.shopname),
                                h("div",{
                                    slot:"content",
                                    style:{
                                        "white-space":"normal"
                                    }
                                },params.row.shopname+"")
                            ])
                        }
                    },
                    {
                        title: '商品分类',
                        key: 'catNameLast',
                        align:"center",
                        render:(h,params)=>{
                            return h("Tooltip",{
                                props:{
                                    placement:"top-start",
                                    style:{
                                        width:"100%",
                                        overflow:"hidden"
                                    }
                                }
                            },[
                                h("span",{
                                    attrs:{
                                        "class":"notwrap",
                                    },
                                    style:{
                                        cursor:"pointer",
                                        width:"100%",
                                    }
                                },params.row.catNameLast),
                                h("div",{
                                    slot:"content",
                                    style:{
                                        "white-space":"normal"
                                    }
                                },params.row.catNameLast+"")
                            ])
                        }
                    },
                    {
                        title: '审核状态',
                        key: 'goodsstatus',
                        align:"center",
                        width:100,
                        render:(h,params)=>{
                            return h("div",[
                                h("Icon",{
                                    style:{
                                      marginRight:"6px"
                                    },
                                    props:{
                                        type:params.row.goodsstatus=="1"?"checkmark-round":"close-round",
                                        color:params.row.goodsstatus=="1"?"green":"red",
                                    }
                                }),
                                h("span",
                                    {
                                        style:{
                                            color:params.row.goodsstatus=="1"?"green":"red",
                                        }
                                    },params.row.goodsstatus=="1"?"已审核":"未审核")
                            ])
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        align: 'center',
                        width:100,
                        render:(h,params)=>{
                            return h("ButtonGroup",[
                                h("Button",{
                                    props:{
                                        type:"info",
                                        disabled:params.row.goodsstatus=="1"?true:false
                                    },
                                    on:{
                                        click:()=>{
                                            this.danShenHe(params.row.goodsid,params.index)
                                        }
                                    }
                                },params.row.goodsstatus=="1"?"已审核":"审核"),
                            ])
                        }
                    }
                ],
                data:[],
                searchData:{
                    timeStartEnd:[],//两个时间内的赛选
                    isTimeUp:"",//时间排序
                    brandType:"",//品牌分类
                    brandName:"",//品牌名称,
                    goodsName:"",//商品名称
                    shopName:"",//店铺名称
                    goodsSn:"",//编号
                    goodsTypeIdOne:"",
                    goodsTypeIdTwo:"",
                    goodsTypeIdThree:"",
                },
                brandType:[],
                goodsTypeOne:[],//一级分类
                goodsTypeTwo:[],//二级分类
                goodsTypeThree:[],//三级分类
                search_loading:false,
                total:0,
                index:1,
                page_con:15,
                selectList:[],//选中的列表
            }
        },
        mounted(){
            this.getGoodsList()
            this.getbrandType()
            this.getTypeOneList()
        },
        methods:{
            //获取商品列表
            getGoodsList(){
                this.getJsonData("Goods/getGoodsList",{
                    num:this.page_con,
                    page:this.index,
                    begin:this.searchData.timeStartEnd[0]?this.searchData.timeStartEnd[0]/1000:"",
                    last:this.searchData.timeStartEnd[1]?this.searchData.timeStartEnd[1]/1000:"",
                    goodsSn:this.searchData.goodsSn,
                    goodsName:this.searchData.goodsName,
                    brandId:this.searchData.brandType,
                    shopName:this.searchData.shopName,
                    goodsCatId1:this.searchData.goodsTypeIdOne,
                    goodsCatId2:this.searchData.goodsTypeIdTwo,
                    goodsCatId3:this.searchData.goodsTypeIdThree,
                    sort:this.searchData.isTimeUp,
                    goodsStatus:0,
                },true)
                    .then((res)=>{
                        this.search_loading=false
                        this.data=res.data
                        this.total=parseInt(res.count)
                    })
                    .catch((res)=>{
                        this.search_loading=false
                    })
            },
            //获取商品一级分类
            getTypeOneList(){
                this.getJsonData("Cat/getOneCat",{})
                    .then((res) => {
                        this.goodsTypeOne=res.data
                    })
            },
            //获取商品二级分类
            getTypeTwoList(){
                if(this.searchData.goodsTypeIdOne!=""){
                    this.getJsonData("Cat/getChildCat",{catId:this.searchData.goodsTypeIdOne})
                        .then((res) => {
                            this.goodsTypeTwo=res.data
                        })
                }else{
                    this.goodsTypeTwo=[]
                    this.goodsTypeThree=[]
                }
            },
            getTypeThreeList(){
                if(this.searchData.goodsTypeIdTwo!=""){
                    this.getJsonData("Cat/getChildCat",{catId:this.searchData.goodsTypeIdTwo})
                        .then((res) => {
                            this.goodsTypeThree=res.data
                        })
                }else{
                    this.goodsTypeThree=[]
                }
            },
            //获取品牌分类
            getbrandType(){
                this.getJsonData("Pinpai/getAllForHua",{

                })
                    .then((res)=>{
                        this.brandType=res.data
                    })
            },
            //筛选
            searchGetList(){
                this.search_loading=true
                this.getGoodsList()
                this.index=1
            },
            changePage(n){
                this.index=n
                this.getGoodsList()
            },
            changeTiao(num){
                this.page_con=num
                this.index=1
                this.getGoodsList()
            },
            selectChange(selection){
                let list=[]
                for(var i=0;i<selection.length;i++){
                    list.splice(i,1,selection[i].goodsid)
                }
                this.selectList=list.join(",")
            },
            //推荐
            allShenHe(){
                if(this.selectList!=""){
                    this.$Loading.start();
                    this.getJsonData("Goods/changeGoodsStatus",{goodsIds:this.selectList,type:1})
                        .then((res)=>{
                            this.$Message.success("操作成功")
                            this.getGoodsList()
                            this.selectList=""
                            this.$refs.selection.selectAll(false);
                        })
                }else{
                    this.$Message.warning("请勾选商品")
                }
            },
            danShenHe(id,index){
                this.getJsonData("Goods/changeGoodsStatus",{goodsIds:id,type:1})
                    .then((res)=>{
                        this.$Message.success("操作成功")
                        this.getGoodsList()
                        this.selectList=""
                        this.$refs.selection.selectAll(false);
                    })
            }
        }
    }
</script>
<style lang="less">
    @import "./goods-auditing";
</style>